<template>
  <Tabs value="list">
    <Tab-pane label="地址管理" name="list">
      <div class="tool-wrap">
        <div class="search-wrap lf">
          <i-select v-model="searchForm.field" style="width: 100px;">
            <i-option value="name">姓名</i-option>
            <i-option value="telephone">电话</i-option>
            <i-option value="address">地址</i-option>
          </i-select>
          <i-input v-model="searchForm.value" style="width: 200px;"></i-input>
          <i-button type="ghost" icon="search" @click="search">搜索</i-button>
        </div>
        <Button-group class="rf">
          <i-button type="ghost" icon="refresh" class="tool-btn" @click="refresh()">
            刷新
          </i-button>
          <i-button type="ghost" icon="plus" class="tool-btn" @click="showModal()">
            增加地址
          </i-button>
          <i-button type="ghost" icon="trash-a" class="tool-btn" @click="deleteList">批量删除地址</i-button>
        </Button-group>
      </div>
      <i-table
        class="table-wrap"
        :data="addressList"
        :columns="columns"
        @on-selection-change="checkChange">
      </i-table>
      <Page
        class="page-wrap"
        :total="pageConfig.total"
        :page="pageConfig.page"
        :page-size="pageConfig.pageSize"
        :page-size-opts="[10,20,50,100]"
        show-sizer
        show-elevator
        show-total
        placement="top"
        @on-change="pageChange"
        @on-page-size-change="pageSizeChange">
      </Page>
    </Tab-pane>
    <Modal class-name="vertical-center-modal" v-model="modal.show" :title="modal.title" width="600">
      <i-form ref="modalForm" :model="modal.formData" :rules="modal.rules" :label-width="100">
        <Form-item label="收件人姓名" prop="name">
          <i-input v-model="modal.formData.name" placeholder="请输入收件人姓名"></i-input>
        </Form-item>
        <Form-item label="收件人电话" prop="telephone">
          <i-input v-model="modal.formData.telephone" placeholder="请输入收件人电话"></i-input>
        </Form-item>
        <Form-item label="小区">
          <i-select v-model="modal.formData.community_id" :label-in-value="true" @on-change="communityChange">
            <i-option v-for="community in communityList" :value="community.id" :key="community.id">{{community.name}}</i-option>
          </i-select>
        </Form-item>
        <Form-item label="详细地址选择">
          <InputNumber v-model="modal.formData.ridgepole" :min="1"></InputNumber>
          栋
          <InputNumber v-model="modal.formData.unit" :min="1"></InputNumber>
          单元
          <InputNumber v-model="modal.formData.floor"></InputNumber>
          楼
          <InputNumber v-model="modal.formData.number" :min="1"></InputNumber>
          号
        </Form-item>
        <Form-item label="详细地址" prop="address">
          <i-input v-model="fullAddress"></i-input>
        </Form-item>
      </i-form>
      <modal-footer slot="footer" :loading="modal.loading" @save="save" @close="closeModal"></modal-footer>
    </Modal>
  </Tabs>
</template>
<script type="text/ecmascript-6">
  import tableAction from '../../../components/admin/tableAction.vue'
  import modalFooter from '../../../components/admin/modalFooter.vue'
  import addressApi from '../../../api//admin/memberAddress'
  import communityApi from '../../../api/admin/community'
  const emptyData = {
    id: 0,
    name: '',
    address: '',
    telephone: '',
    community_id: 0,
    community_name: '',
    ridgepole: 1,
    unit: 1,
    floor: 1,
    number: 1
  }
  export default{
    components: {tableAction, modalFooter},
    props: [],
    data () {
      const self = this
      const {$rules} = self
      return {
        searchForm: {
          field: 'name',
          value: ''
        },
        communityList: [],
        addressList: [],
        columns: [
          {
            type: 'selection',
            width: 40,
            align: 'center'
          },
          {
            title: '收件人姓名',
            key: 'name'
          },
          {
            title: '收件人电话',
            key: 'telephone'
          },
          {
            title: '收件人地址',
            key: 'address'
          },
          {
            title: '操作',
            render (h, params) {
              return h(tableAction, {props: {data: params.row, edit: self.showModal, deleteItem: self.delete}})
            }
          }
        ],
        checkList: [],
        pageConfig: {
          page: 1,
          pageSize: 10,
          total: 0
        },
        modal: {
          show: false,
          loading: false,
          title: '新增地址',
          formData: {...emptyData},
          rules: {
            name: [$rules.required, $rules.max_60],
            address: [$rules.required, $rules.max_100],
            telephone: [$rules.required, $rules.telephone]
          }
        }
      }
    },
    computed: {
      fullAddress: {
        set (value) {
          this.modal.formData.address = value
        },
        get () {
          const {formData} = this.modal
          let address = formData.community_name
          if (formData.ridgepole !== 0) {
            address += formData.ridgepole + '栋'
          }
          if (formData.unit !== 0) {
            address += formData.unit + '单元'
          }
          if (formData.floor !== 0) {
            address += formData.floor + '楼'
          }
          if (formData.number !== 0) {
            address += formData.number + '号'
          }
          formData.address = this.modal.show ? address : formData.address
          return formData.address
        }
      }
    },
    methods: {
      showModal (data) {
        const self = this
        if (self.communityList.length === 0) {
          self.$Message.warning('请先添加小区')
          return
        }
        self.modal.formData = {...emptyData}
        if (data) {
          self.modal.title = '编辑地址'
          Object.assign(self.modal.formData, data)
        }
        self.modal.show = true
      },
      closeModal () {
        this.modal.show = false
      },
      communityChange (value) {
        this.modal.formData.community_name = value.label
      },
      checkChange (selection) {
        this.checkList = selection
      },
      pageChange (page) {
        this.pageConfig.page = page
        this.getList()
      },
      pageSizeChange (pageSize) {
        this.pageConfig.pageSize = pageSize
        this.getList()
      },
      search () {
        this.getList()
      },
      refresh () {
        this.searchForm.value = ''
        this.getList()
      },
      getCommunityList () {
        const self = this
        communityApi.getList(data => {
          if (data.length !== 0) {
            self.communityList = data
            emptyData.community_id = data[0].id
            emptyData.community_name = data[0].name
          }
          self.getList()
        })
      },
      getList () {
        const self = this
        addressApi.getList({...self.pageConfig, ...self.searchForm}, data => {
          self.addressList = data.data
          self.pageConfig.total = data.count
        })
      },
      save () {
        const self = this
        self.$refs.modalForm.validate(valid => {
          if (!valid) {
            return
          }
          self.modal.loading = true
          addressApi.save(self.modal.formData, res => {
            self.getList()
            self.modal.loading = false
            self.modal.show = false
          }, msg => {
            self.modal.loading = false
          })
        })
      },
      delete (data) {
        const self = this
        self.$isConfirm('确认删除地址', () => {
          addressApi.delete(data.id, res => {
            self.getList()
          })
        })
      },
      deleteList () {
        const self = this
        if (self.checkList.length === 0) {
          self.$Message.warning('请选择地址')
          return
        }
        let ids = []
        self.checkList.forEach(item => {
          ids.push(item.id)
        })
        self.$isConfirm('确认删除选择地址', () => {
          addressApi.delete(ids, res => {
            self.getList()
          })
        })
      }
    },
    mounted () {
      this.getCommunityList()
    }
  }
</script>
<style lang="less">
</style>
